<template>
	<view>
		<view class="course_title">
			<view>{{courseInfo.Cname}}</view>
			<view>
				<text>{{courseInfo.Cprice==0?'免费课':courseInfo.Cprice+"￥"}}</text>
				<text>初级</text>
				<text>2小时</text>
					<text>110人在学</text>
			</view>
		</view>
	  <u-tabs  :current="acIndex"  lineWidth="80"  itemStyle="padding-bottom: 5px; padding-right: 15px; width: 15vw;"   class="mytab" :list="list1" @click="click">
	  </u-tabs>
	  <view v-if="acIndex==0">
		  <view>
			  <view>
				  名称：{{courseInfo.Cname}}
			  </view>
			  <view>课程简介：{{courseInfo.Cdescribe}}</view>
			  <view>
				<image :src="'http://127.0.0.1:3000'+courseInfo.Cpic"></image>
			  </view>
			  <view>
				  富文本的内容：
				  <!-- {{courseInfo.Cdetails}} -->
				  <!-- 你碰到过哪些 uniapp的兼容问题吗
						在富文本编辑器回显的时候 
						用ifdef语句 小程序用rich-text组件渲染
						h5 用普通元素 加v-html 渲染
					-->
				 <!-- #ifdef MP-WEIXIN  -->
				   	<rich-text :nodes="courseInfo.Cdetails"></rich-text>
				 <!-- #endif -->  
				  <!-- #ifdef  APP-PLUS || H5 -->
					<view v-html="courseInfo.Cdetails"></view>
				 <!-- #endif -->  
			  </view>
		  </view>
	  </view>
	  <view v-if="acIndex==1">
		  <!-- 目录 -->
	  		 <view class="dirList">
				 <view class="dir_one" v-for="(item,index) in CDlist" :key="item._id"> 
					 <view class="dir_title">
						 <text style="margin:0 20px;">第{{index+1}}章</text> <text>{{item.CDName}}</text> 
					 </view>
					 <!-- 视频列表 -->
				 	<video-list :dirNumber="index+1" :_id="item._id" :CDid="c_id"></video-list>
				 </view>
			 </view>
			 
	  </view>
	  <view v-if="acIndex==2">
	  		  评价内容内容内容内容内容内容
	  </view>
	  <view v-if="acIndex==3">
	  		  推荐内容内容内容内容
	  </view>
	  <view class="postabbar">
		  <view @click="toColl">
			  <u-icon :name="courseInfo.ifColected?'star-fill':'star'" size="30"></u-icon>
			  <view>收藏</view>
		  </view>
		  <view>
			  <u-button  type="error" @click="toBuy">
				 {{courseInfo.Cprice==0?'开始学习':'立即购买' }} 	
				<view v-if="courseInfo.Cprice==0">免费</view>
			  </u-button>
		  </view>
	  </view>
	</view>
</template>

<script>
	import {getCourseOnLogin,getCouseDir,toCollect,toBuyApi} from '@/api/learn.js'
	import videoList from './videoList.vue'
	export default {
		components:{videoList},
		onLoad(options){
			this.CDid=options.ID;
			this.c_id=options._id;
			console.log(options._id,"00000000009999999999")
			// 传递课程ID
			this.getCourse(options.ID)//获取课程所有信息
			this.getDirList(options.ID)//获取课程下目录接口
		},
		data() {
			return {
				c_id:"",//课程的_id
				CDid:"",//课程ID
				CDlist:[],//目录数据
				evaluate:[],//p评价数据,
				courseInfo:{},//课程简介
				acIndex:1,
				list1: [{
					name: '简介',
				}, {
					name: '目录',
				}, {
					name: '评价'
				}, {
					name: '推荐'
				}, ]
			}
		},
		methods: {
			async toBuy(){ //购买接口
				let res=await toBuyApi(this.CDid,uni.getStorageSync("user").name)
				console.log(res,"----------")
				if(res.success){
					 uni.showToast({
					 	title:'支付成功'
					 })
					// 小程序 微信支付
					//  uniapp开发多端  ----第三方支付  （微信，支付宝）
					
					// 讲讲你做的支付的流程
					// 用户点击立即购买或在购物车下单
					// 会进行库存判断接口的调用，如果不库存不足 进行提示
					
					// 如有库存 调用接口 发送 商品id,价格,收货人,收货地址等信息
					// 后台会返回,订单id,需要支付金额,运费等等信息
					
					// 如果是小程序微信支付,调接口发送订单id 和订单金额等信息
					// 后台会返回支付需要的 随机字符串,支付签名paySign 
					
					// 调用微信支付方法wx.requestPayment 完成支付
					
					// uni.requestPayment({
					// 	  timeStamp: '',  //时间戳
					// 	  nonceStr: '', //随机字符串，长度为32个字符以下
					// 	  package: '',
					// 	  signType: 'MD5',
					// 	  paySign: '',//支付签名
					// 	  success(){
							  
					// 	  }
					// })
					
					// 用户点击立即购买或在购物车下单
					// 会进行库存判断接口的调用，如果不库存不足 进行提示
					
					// 如有库存 调用接口 发送 商品id,价格,收货人,收货地址等信息
					// 后台会返回,订单id,需要支付金额,运费等等信息
					
					// 选择你的支付方式,调接口发送订单id 和订单金额等信息,支付方式
					// 后台会返回支付需要的 根据选择的是 微信支付还是，支付宝支付，
					// 来返回支付需要的随机字符串,支付签名paySign 等
					
					// 调用uniapp 的h5plus的支付插件 
					// 他需要的参数有 支付通道过如 支付宝或微信
					// statement  支付需要的签名和字符串等 signStr
					// plus.payment.request(channel, statement, successCB, errorCB);
					
					
				}
				uni.navigateTo({
					url:"/pages/learn/learnInfo?ID="+this.CDid+"&_id="+this.c_id
				})
			},
			async toColl(){ //收藏接口
				let res=await toCollect(this.CDid,uni.getStorageSync("user").name)
				console.log(res)
				
			},
			click(item) { //tab切换
				console.log('item', item);
				this.acIndex=item.index;
			},
			// 获取课程信息 
			async getCourse(ID){
				let res=await getCourseOnLogin(ID)
				console.log(res,"----------")
				this.courseInfo=res.data; //课程所有信息
				this.evaluate=res.data.evaluate;//评价
				// 加入模拟的富文本内容
			   this.courseInfo.Cdetails=`
					<div>
						<img src="	https://img2.baidu.com/it/u=116647797,852400462&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=578" />
						<b>好的课程</b>
					</div>
			   `
			},
			async getDirList(ID){ //获取课程下目录接口
				let res=await getCouseDir(ID);
				console.log(res,"^^^^^^^^^")
				this.CDlist=res.data.list; //目录信息
			}
		}
	}
</script>


<style lang="scss">
	.course_title{
		width: 100vw;
		height: 180px;
		background: seagreen;
		padding: 20px 0;
		box-sizing: border-box;
		font-size: 20px;
		color: white;
		view{
			margin-top: 20px;
			font-size: 20px;
			margin-left: 20px;
			
		}
	}
	.mytab{
		width: 100vw;
	}
	.dirList{
		width: 100vw;
	}
	.dir_one{
		width: 100vw;
		.dir_title{
			font-weight: bold;
			font-size: 20px;
		}
		
	}
	.postabbar{
		width: 100%;
		display: flex;
		height: 80px;
		position: fixed;
		bottom: 0;
		background: white;
		left: 0;
		align-items: center;
		
		>view:nth-child(1){
			width: 100px;
			height: 80px;
			text-align: center;
			.u-icon{
				margin-left: 40px;
				margin-top: 20px;
			}
		}
		>view:nth-child(2){
			flex:1;
			text-align: center;
		}
	}
</style>